import React, { useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import Title from '@/components/Title'

// 引入echarts
import * as echarts from 'echarts'


export default function Jurisdiction({ res }) {

    const twoRef = useRef(null)
    useEffect(() => {
        const myChart02 = echarts.init(twoRef.current)

        const updateOption = () => {
            const option02 = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: "{a} <br/>{b} : {c}",
                    textStyle: {
                        color: '#4E8AD7',
                        fontSize: 20,
                        fontFamily: 'PingFang-SC-Regular',
                        fontWeight: 400
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        name: '病症',
                        nameTextStyle: {
                            fontSize: 12,
                            fontWeight: 400,
                            color: '#4E8AD7',
                            fontFamily: 'SourceHanSansCN-Regular',
                            verticalAlign: 'top',
                            padding: [-5, 0, 0, -5]
                        },
                        data: ['正常', '轻度', '中度', '重度'],
                        axisTick: {
                            show: false,
                            alignWithLabel: true
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#fff",
                                fontSize: 16,
                                fontWeight: 400,
                                fontFamily: 'SourceHanSansCN-Regular'
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#BFBFBF",
                                width: 1
                            }
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '人数',
                        nameTextStyle: {
                            fontSize: 12,
                            fontWeight: 400,
                            color: '#4E8AD7',
                            fontFamily: 'SourceHanSansCN-Regular',
                            verticalAlign: 'top',
                            padding: [-12, 5, 0, 0]
                        },
                        min: 0, // 设置 y 轴最小值
                        interval: 200, // 设置 y 轴刻度间隔
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#BFBFBF",
                                width: 1, // 增加宽度
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#4E8AD7",
                                fontSize: 12,
                                fontWeight: 400,
                                fontFamily: 'SourceHanSansCN-Regular'
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "#305FA8"
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '辖区内认知测评结果（MOCA）',
                        type: 'bar',
                        barWidth: '40%',
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#fff',
                                fontSize: 16,
                                fontWeight: 400,
                                fontFamily: 'SourceHanSansCN-Regular',
                            },
                            formatter: function (params) {
                                return params.value + '人'
                            }
                        },
                        data: [
                            { value: res?.moca[0]?.num, itemStyle: { color: '#28D8C1' } },
                            { value: res?.moca[1]?.num, itemStyle: { color: '#F4BF5C' } },
                            { value: res?.moca[2]?.num, itemStyle: { color: '#DF7833' } },
                            { value: res?.moca[3]?.num, itemStyle: { color: '#D90804' } }
                        ]
                    }
                ]
            }
            myChart02.setOption(option02)
        }

        updateOption()

        const handleResize = () => {
            updateOption()
            myChart02.resize()
        }
        window.addEventListener("resize", handleResize)
    }, [res])

    return (
        <div className={styles.jurisdiction_container}>
            <Title titleDescription={'辖区内认知测评结果（MOCA）'} />
            <div className={styles.twoEchart} ref={twoRef}></div>
        </div>
    )
}
 